<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
<!--
    将视口的宽度设置为390px
    当一个视口的宽度可以使得像素比变为最佳像素比时，这个视口（宽）就被称为完美视口
-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        html{
            /*font-size: 0.13333vw;*/

            /*

                扩展：
                    - 早期的浏览器，字体大小最小支持到12px,
                        所以当我们设置一个小于12px的字体时，会被重置为12（0px除外）
                        现在没有这个问题了

                    - 思考：
                        - 假设现在这个问题依然存在，那我们要如何处理

            font-size: 2.6666vw;

            */
            font-size: calc(100vw / 750);
        }

        .box1{
            /*width: 91.73vw;*/
            width: 688rem;
            height: 91rem;

            /*width: 34.4rem;*/
            /*height: 4.55rem;*/
            background-color: tomato;
        }
    </style>
</head>
<body>

<!--
    像素（px）
        - 像素是屏幕上一个一个会发光的小点
        - 物理像素
            - 会发光的小点
        - css像素
            - 我们编写样式时使用px

        - 我们编写样式时使用css像素，屏幕呈现图像时使用的物理的像素
            默认情况下在pc中，一个css像素对应一个物理像素（1 : 1）
        - 当我们在浏览器中或系统中对网页进行缩放时，像素比会发生变化
            比如：当我们将网页放大1.5倍时，CSS像素是不变的，
                而物理像素会变为原来的1.5倍大 (1 : 1.5)
    视口（viewport）
        - 浏览器的可视区域称为视口

    移动端
        - 移动端的项目通常都会运行在手机中，
            手机屏幕清晰度都是非常的高的（物理像素越小，清晰度就越高）
        - 例子：
            显示器
                宽 两x办 像素 1920
            手机
                宽 半x   像素 1170

            从这个粗糙的案例我们能够得出一个结论：
                手机的单个像素要远远地小于显示器的！

         - 同样是12px的字体，在显示器中看起来正合适
            但是到了手机中，就是看不清的
            也就是说，如果将pc端的页面直接在手机中呈现，效果是很差的！

          - 为了使得pc端页面可以在手机中正常显示，
                在显示pc端页面时，移动端的浏览器会自动将视口宽度转换为980px
                如果pc端页面大小超过了980px，浏览器会自动对页面进行缩小，使得网页可以在浏览器中完整呈现
                但是即使这样，网页在移动端浏览器中的体验依然非常的不好


          - 移动端浏览器，默认的像素比是：
            980 : xxxx
                980 : 1170
                980 : 1080

          - 为了在移动端有一个更好的体验，公司可以为手机设置一个专门的页面
          - 每一个移动设备在出厂时，都会设计一个最佳的像素的比，只有达到最佳的像素比时，才能确保网页在移动端中有一个最佳的效果。
          - 例如：
            iPhone 12 pro的像素比是 1:3 1个css像素 对应 3个物理像素

          - 要使得浏览器有一个最佳效果，必须先使得网页变成最佳像素比
                目前：980 : 1170  390 : 1170
                期望：1 : 3
                可以通过调整视口的大小来改变像素比

                <meta name="viewport" content="width=390px">
                    当一个视口的宽度可以使得像素比变为最佳像素比时，这个视口（宽）就被称为完美视口
                    iPhone12 pro的完美视口就是 390
                    但是！不同手机的完美视口是不同的，如果简单粗暴设置为390，这样一来只能在该手机中取得最佳效果
                        其他手机就不行了！
                    我们希望我们的页面在不同的设备中都能以完美视口来呈现
                        在 12pro，视口是390
                        在 se中，  视口是375
                        在 max中， 视口是414
                        ...

                    <meta name="viewport" content="width=device-width"> 可以确保网页在任何设备下都会有一个完美视口！
                    记住！凡是开发需要在移动端中访问的页面，都要加上完美视口


    适配问题
        - 开启完美视口后，任何移动设备都能获得一个最佳的浏览效果
            但是，这样却导致了不同设备下视口宽度不同
            同样是390px，在12 pro下是全屏，但到se下就出现了滚动条，到了iPad下就剩下了一半了！
            这样一来，我们就不能在移动端项目中再使用px作为单位了！
         - 可以使用vw来解决这个问题，vw - viewport width 视口宽度
            1vw = 1% 视口宽度

https://lanhuapp.com/link/#/invite?sid=lX00lMna
分享人: 李立超
链接有效期: 20230309~20230323

        - 实际开发中，设计图的宽度都是像素为单位的，有375 750 1125 414 ...
        - 在将设计图转换为页面时，单位vw
        - 以750宽的设计图为例 750px = 100vw    1px = 0.1333333vw
            如何显示 688 x 91 的元素  91.73vw x 12.13vw

-->
    <div class="box1"></div>

</body>
</html>